<template>
  <div>
    <div :style="{ borderBottom: '1px solid #E9E9E9' }">
      <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
        Check all
      </a-checkbox>
    </div>
    <br />
    <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
  </div>
</template>
<script>
// const plainOptions = [];
const defaultCheckedList = [];
export default {
  props:["plainOptions"],
  data() {
    return {
      checkedList: defaultCheckedList,
      indeterminate: true,
      checkAll: false,
    //   plainOptions:[],
    };
  },
  methods: {
    onChange(checkedList) {
      this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length;
      this.checkAll = this.checkedList.length === this.plainOptions.length;
    },
    onCheckAllChange(e) {
      
      Object.assign(this, {
        checkedList: e.target.checked ? this.plainOptions : [],
        indeterminate: false,
        checkAll: e.target.checked,
      
      });
      this.$emit("all_info",this.checkedList)
      
    },
  },
};
</script>
